<template>
  <div>
    <!-- 头部搜索框 -->
    <headnav></headnav>
    <!-- 轮播图 -->
    <van-swipe
      :autoplay="3000"
      indicator-color="white"
      class="swiper-container"
    >
      <van-swipe-item v-for="(image, index) in imgs" :key="index">
        <img v-lazy="image.imgUrl" class="slide" />
      </van-swipe-item>
    </van-swipe>
    <!-- 推荐栏 -->
    <div class="homecategory">
      <ul>
        <li
          v-for="(item, index) in category"
          :key="index"
          @click="$router.push('/product-list/100002')"
        >
          <img :src="item.imgUrl" alt="xxx" />
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
    <!-- 购物楼层 -->
    <shopfloor></shopfloor>
    <!-- 底部导航 -->
    <tabbar :active="0"></tabbar>
  </div>
</template>
<script>
import tabbar from "../../components/tabBar.vue";
import headnav from "./headNav.vue";
import shopfloor from "./tuijian.vue";
import { getSlides, homeCategory } from "../../api/index";
export default {
  data() {
    return {
      imgs: [],
      category: [],
    };
  },
  components: {
    tabbar,
    headnav,
    shopfloor,
  },

  created() {
    getSlides((res) => {
      // console.log(res);
      this.imgs = res.data;
    });

    homeCategory((res) => {
      // console.log(res);
      this.category = res.data;
    });
  },
};
</script>
<style lang="scss" scoped>
.swiper-container {
  .slide {
    width: 100%;
  }
}

.homecategory {
  display: flex;
  width: 100%;
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 20%;
      flex-direction: column;
      flex-wrap: wrap;
      text-align: center;
      img {
        width: 80px;
        height: 80px;
        margin: 26px auto 16px auto;
      }
      p {
        font-size: 16px;
      }
    }
  }
}
</style>